<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尘埃粒子看板</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            background-color: #030212;
        }
        .el-header{
            background-image: url('../images/TopImg.png'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }
        .main {
            min-height: 85vh;
            display: flex;
        }
        table {
            margin-top: 10px;
            margin-bottom: 10px;
            border-collapse: collapse;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100vh; text-align: center;">
        <el-header height="8vh" style="display: flex;justify-content: center;align-items: center;">
            <div class="title" style="display: flex;justify-content: center;align-items: center;">
                <div style="height: 8vh;">
                    <img :src="logoPath" style="height: 8vh;">
                </div>
                <div>
                    <strong style="color: aliceblue; font-size: 4vh;">ESD实时监控系统</strong>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="time" id="showTime" style="color: aliceblue; position: absolute; right: 3vw; margin-top: -7vh; font-size: 1vw;">
                {{currentTimeStr}}
            </div>
            <div style="width: 100% ;">
                <el-row v-for="(row , rowKey) in dustRows" :key="rowKey">
                    <el-col :span="6" v-for="(dustStatus , dustKey) in row" :key="dustKey">
                        <div style="width: 96%; border: 1.5px solid #e2d653; border-radius: 5px; color: aliceblue;">
                            <div style="display: flex;">
                                <div style="background-color: rgb(154, 154, 247); width: 8vw; border-radius: 5px 0 0 0;">{{dustStatus.position}}</div>
                                <div style="margin-left: 8vw;">通讯状态:&nbsp;&nbsp;
                                    <span style="color: #2cc203;" v-if="dustStatus.status=='通讯正常'">●</span>
                                    <span style="color: #838181;" v-else>●</span>
                                </div>
                            </div>
                            <table>
                                <tbody>
                                  <tr style="border-bottom: 1px solid aliceblue;">
                                    <td>0.3um</td>
                                    <td>{{dustStatus.num03}}</td>
                                    <td>PCS/L</td>
                                    <td style="color: #2cc203;" v-if="dustStatus.status03=='正常'">●</td>
                                    <td style="color: #f73b2d;" v-if="dustStatus.status03=='异常'">●</td>
                                    <td style="color: #838181;" v-if="dustStatus.status03=='失联'">●</td>
                                  </tr>
                                  <tr style="border-bottom: 1px solid aliceblue;">
                                    <td>0.5um</td>
                                    <td>{{dustStatus.num05}}</td>
                                    <td>PCS/L</td>
                                    <td style="color: #2cc203;" v-if="dustStatus.status05=='正常'">●</td>
                                    <td style="color: #f73b2d;" v-if="dustStatus.status05=='异常'">●</td>
                                    <td style="color: #838181;" v-if="dustStatus.status05=='失联'">●</td>
                                  </tr>
                                  <tr style="border-bottom: 1px solid aliceblue;">
                                    <td>1.0um</td>
                                    <td>{{dustStatus.num10}}</td>
                                    <td>PCS/L</td>
                                    <td style="color: #2cc203;" v-if="dustStatus.status10=='正常'">●</td>
                                    <td style="color: #f73b2d;" v-if="dustStatus.status10=='异常'">●</td>
                                    <td style="color: #838181;" v-if="dustStatus.status10=='失联'">●</td>
                                  </tr>
                                  <tr style="border-bottom: 1px solid aliceblue;">
                                    <td>2.5um</td>
                                    <td>{{dustStatus.num25}}</td>
                                    <td>PCS/L</td>
                                    <td style="color: #2cc203;" v-if="dustStatus.status25=='正常'">●</td>
                                    <td style="color: #f73b2d;" v-if="dustStatus.status25=='异常'">●</td>
                                    <td style="color: #838181;" v-if="dustStatus.status25=='失联'">●</td>
                                  </tr>
                                  <tr style="border-bottom: 1px solid aliceblue;">
                                    <td>5.0um</td>
                                    <td>{{dustStatus.num50}}</td>
                                    <td>PCS/L</td>
                                    <td style="color: #2cc203;" v-if="dustStatus.status50=='正常'">●</td>
                                    <td style="color: #f73b2d;" v-if="dustStatus.status50=='异常'">●</td>
                                    <td style="color: #838181;" v-if="dustStatus.status50=='失联'">●</td>
                                  </tr>
                                  <tr style="border-bottom: 1px solid aliceblue;">
                                    <td>10.0um</td>
                                    <td>{{dustStatus.num100}}</td>
                                    <td>PCS/L</td>
                                    <td style="color: #2cc203;" v-if="dustStatus.status100=='正常'">●</td>
                                    <td style="color: #f73b2d;" v-if="dustStatus.status100=='异常'">●</td>
                                    <td style="color: #838181;" v-if="dustStatus.status100=='失联'">●</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td rowspan="2">{{dustStatus.levelDesc}}</td>
                                    <td rowspan="2">{{dustStatus.level}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
    </el-container>
</div>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/axios/axios.js"></script>
<script src="../plugins/echart/echarts.min.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            checkGatewayClock : null ,
            setTimeClock: null ,
            logoPath: null,
            currentTimeStr: null ,
            dustRows: [] ,
            dustRowsClock: null ,
        },
        created() {
            axios.get("/line/getLogoPath").then((res) => {
                this.logoPath = res.data;
            });
            this.checkGatewayClock = window.setInterval(function(){
                let urlParams = new URLSearchParams(window.location.search);
                let queryParam = urlParams.get("line");
                axios.get("/gateway/checkLineGateway?lineName=allLine").then((res) => {
                    if (res.data.code === 0) {
                        let serverIps = "" ;
                        let gatewayStatus = res.data.data;
                        let index = 0 ;
                        for (let i = 0; i < gatewayStatus.length; i++) {
                            if (!gatewayStatus[i].connected){
                                if (index === 0){
                                    serverIps = serverIps + gatewayStatus[i].serverIp;
                                }else{
                                    serverIps = serverIps + "、" + gatewayStatus[i].serverIp;
                                }
                                index++ ;
                            }
                        }
                        if (index > 0){
                            app.$message({
                                type: 'error',
                                message: "网关: " + serverIps + " 的网关出现异常！！"
                            });
                        }
                    }
                }).catch((err) => {
                    app.$message({
                        type: 'error',
                        message: "服务器出现异常！！"
                    });
                });
            }, 3000);
            this.setTimeClock = window.setInterval(function(){
                let currentTime = new Date();
                // 格式化年份
                const year = currentTime.getFullYear();
                // 格式化月份
                const month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 使用padStart补齐前导零
                // 格式化日期
                const day = currentTime.getDate().toString().padStart(2, '0');
                const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                app.currentDateStr = year + "年" + month + "月" + day + "日  ";
                let hours = currentTime.getHours();
                let minutes = currentTime.getMinutes();
                let seconds = currentTime.getSeconds();
                hours = hours < 10 ? '0' + hours : hours;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                // 这里 this指向的是window, 所以要使用 app
                app.currentTimeStr = year +"/" + month +"/" + day + " " + days[currentTime.getDay()] + "  " + hours + ":" + minutes + ":" + seconds;
            }, 1000);
            this.dustRowsClock = window.setInterval(function(){
                axios.get("/dust/getDustRows").then((res) => {
                    app.dustRows = res.data ;
                });
            }, 3000);
        },
        methods: {
        },
        mounted() {
        },
        beforeDestroy() {
            window.clearInterval(this.checkGatewayClock);
            window.clearInterval(this.setTimeClock);
            window.clearInterval(this.dustRowsClock);
        }
    });
</script>
</body>
</html>